@charset "UTF-8";
@import "./common.scss";
@import "../fonts/iconfont.css";

main{
	.nav{
		padding: 2vw 86vw 2vw 4vw;
		background-color: #08cacc;
		a{
			font-size: 1vw;
			font-weight: normal;
			font-stretch: normal;
			line-height: 1vw;
			letter-spacing: 0vw;
			color: #ffffff;
		}
		i{
			font-size: 1vw;
			color: #ffffff;
		}
		
	}
	
	.top{
		position: relative;
		background-image: url(../img/personalBg.png);
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 3vw;
		padding-left: 29vw;
		padding-bottom: 5vw;
		.btn{
			font-size: 0;
			button{
				background-color: #FFFFFF;
				border: none;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 1vw;
				letter-spacing: 0vw;
				color: #414141;
				margin-right: 1vw;
				padding: 1vw 1.5vw;
				border-radius: 10vw;
			}
			button:hover{
				cursor: pointer;
				background-color: #08cacc;
			}
		}
		.user{
			position: absolute;
			right: 3vw;
			top: 2.7vw;
			span{
				vertical-align: middle;
				font-size: 2vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 1vw;
				letter-spacing: 0vw;
				color: #ffffff;
			}
			.imgBox{
				margin-left: 1vw;
				vertical-align: middle;
				display: inline-block;
				width: 4vw;
				height: 4vw;
				img{
					width: 100%;
				}
			}
		}
	}
	
	.content{
		margin-bottom: 52vw;
		padding-top: 5vw;
		.left{
			display: inline-block;
			margin-left: 28vw;
			.box{
				i{
					font-size: 5vw;
					color: #cacaca;
					vertical-align: middle;
				}
				span{
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					vertical-align: middle;
					color: #4d4d4d;
				}
			}
			.box:hover{
				transform: scale(1.3);
				i{
					color: #08cacc;
				}
				span{
					color: #08cacc;
				}
			}
			.imgArrow{
				width: 1vw;
				height: 2vw;
				margin-left: 2vw;
				margin-top: 0.3vw;
				margin-bottom: 0.2vw;
				img{
					width: 100%;
				}
			}
		}
		.center{
			display: inline-block;
			height: 26.3vw;
			transform: translateY(6%);
			border-left:1px dashed #dadada;
			margin-left: 6vw;
			margin-right: 7vw;
		}
		.right{
			display: inline-block;
			
			form{
				
				input{
					display: block;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 2vw;
					letter-spacing: 0vw;
					color: #4d4d4d;
					opacity: 0.4;
					margin-bottom: 2vw;
					padding-left: 1vw;
					border-radius: 3%;
					border: 1px solid #cacaca;
				}
			}
			button{
				display: block;
				margin-top: 7vw;
				padding: 0.6vw 2.8vw;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 2vw;
				letter-spacing: 0vw;
				color: #767676;
				border-radius: 10vw;
				border: 1px solid #cacaca;
				background-color: #FFFFFF;
			}
			button:hover{
				cursor: pointer;
				background-color: #08cacc;
			}
		}
	}
}